<!DOCTYPE html>
<html class="web-vitals-chrome-extension web-vitals-chrome-extension-popup">
  <head>
    <link rel="stylesheet" type="text/css" href="core.css">
  </head>
  <body>
    <header>
      <h1>Metrics</h1>

      <div id="metadata" class="metadata">
        <div id="status">Waiting for local data&hellip;</div>
      </div>
    </header>

    <main>
      <template id="metric-template">
        <div class="metric-wrapper">
          <div class="metric">
            <div class="metric-info">
              <div class="metric-name">Metric Name</div>
            </div>

            <div class="metric-performance metadata">
              <div class="metric-performance-local">
                <div class="metric-performance-local-value-wrapper">
                  <div class="metric-performance-local-value">Waiting&hellip;</div>
                  <div class="info hidden" title="">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 1.66669C5.4 1.66669 1.66666 5.40002 1.66666 10C1.66666 14.6 5.4 18.3334 10 18.3334C14.6 18.3334 18.3333 14.6 18.3333 10C18.3333 5.40002 14.6 1.66669 10 1.66669ZM10.8333 14.1667H9.16666V9.16669H10.8333V14.1667ZM10.8333 7.50002H9.16666V5.83335H10.8333V7.50002Z"/>
                    </svg>
                  </div>
                </div>
              </div>

              <div class="metric-performance-distribution">
                <div class="metric-performance-distribution-rating good">&nbsp;</div>
                <div class="metric-performance-distribution-rating needs-improvement"></div>
                <div class="metric-performance-distribution-rating poor"></div>
              </div>

              <div class="hovercard"></div>
            </div>
          </div>
        </div>
      </template>
    </main>

    <footer class="metadata">

      <div id="device-page-wrapper">
        <span class="device-icon">
          <svg id="device-icon-desktop" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Desktop field data">
            <title>Desktop field data</title>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M3 4H13V10H3L3 4ZM2 4C2 3.44772 2.44772 3 3 3H13C13.5523 3 14 3.44772 14 4V10C14 10.5523 13.5523 11 13 11H3C2.44772 11 2 10.5523 2 10V4ZM16 12H0V13H16V12Z"/>
          </svg>
          <svg id="device-icon-phone" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Phone field data">
            <title>Phone field data</title>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H5V3H11V2ZM4 3V4V12V13V14C4 14.5523 4.44772 15 5 15H11C11.5523 15 12 14.5523 12 14V13V12V4V3V2C12 1.44772 11.5523 1 11 1H5C4.44772 1 4 1.44772 4 2V3ZM11 12V4H5V12H11ZM5 13V14H11V13H5Z"/>
          </svg>
        </span>
        <span id="page"></span>
      </div>

      <div id="footer-wrapper">
        <span id="timestamp"></span>
        <span id="mobile-warning">
          Mobile performance may be significantly slower.
          <a href="https://web.dev/load-fast-enough-for-pwa/" target="_blank" rel="noopener">Learn more</a>
        </span>
        <span id="settings-link">
          <a href="/src/options/options.html" target="_blank">
            <svg width="20" height="20" viewBox="0 0 20 20" role="img" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-labelledby="#settings-icon">
              <title id="settings-icon">Settings</title>
              <path fill-rule="evenodd" d="M8.935 16.094h2.14l.252-1.786.626-.338c.166-.089.32-.178.468-.275l.612-.4 1.72.688 1.063-1.84-1.465-1.147.05-.742c.008-.115.011-.18.011-.243s-.004-.128-.011-.243l-.05-.742 1.466-1.148-1.066-1.84-1.725.69-.612-.4a5.191 5.191 0 0 0-.457-.266l-.642-.333-.26-1.823H8.934l-.256 1.808-.626.337a6.35 6.35 0 0 0-.468.276l-.615.402-1.72-.694L4.19 7.86l1.47 1.15-.049.743a3.936 3.936 0 0 0-.011.243c0 .064.003.128.011.243l.05.746-1.473 1.145 1.057 1.83 1.719-.688.612.4c.148.097.297.183.456.266l.643.333.26 1.823Zm-3.446-.717a1.08 1.08 0 0 1-1.325-.476l-1.34-2.32c-.256-.484-.146-1.055.264-1.377l1.12-.87c-.007-.11-.015-.22-.015-.338 0-.11.008-.227.015-.336l-1.113-.872a1.053 1.053 0 0 1-.27-1.376l1.354-2.335a1.053 1.053 0 0 1 1.31-.461l1.325.534c.19-.124.38-.234.571-.337l.198-1.398c.066-.512.52-.915 1.054-.915h2.709c.541 0 .995.395 1.061.93l.198 1.383c.197.103.388.213.578.337l1.318-.527c.52-.19 1.083.022 1.332.476l1.347 2.328a1.076 1.076 0 0 1-.263 1.376l-1.113.871c.007.11.014.22.014.337 0 .117-.007.227-.014.337l1.113.87c.41.33.527.901.27 1.363l-1.361 2.357a1.06 1.06 0 0 1-1.318.461l-1.318-.527c-.19.124-.38.234-.57.337l-.198 1.398c-.073.498-.527.893-1.069.893H8.644c-.541 0-.995-.395-1.061-.93l-.198-1.383a6.584 6.584 0 0 1-.578-.337l-1.318.527Z" clip-rule="evenodd"/>
              <path d="M9.999 12.559a2.562 2.562 0 1 0 0-5.125 2.562 2.562 0 0 0 0 5.125Z"/>
            </svg>
          </a>
        </span>
      </div>

    </footer>

    <dialog id="eol-notice" popover>
      <p>
        As of January 2025, support for the Web Vitals extension has ended.
        We encourage all users to switch to the DevTools Performance panel instead.
        <a href="https://developer.chrome.com/blog/web-vitals-extension" target="_blank">Learn more</a>
      </p>

      <div>
        <button class="danger" popovertarget="eol-notice" popovertargetaction="hide">I understand</button>
        <label><input type="checkbox" id="hide-eol-notice">Don't show again</label>
      </div>
    </dialog>

    <script type="module" src="popup.js"></script>
  </body>
</html>
